<template>
	<view>
		<!-- <button @tap="handleTap('picker1')">自定义样式颜色-单选</button>
    <view>{{ value1 }}</view>
    <lb-picker ref="picker1"
      v-model="value1"
      mode="selector"
      :list="list1"
      @change="handleChange"
      @confirm="handleConfirm"
      @cancel="handleCancel">
    </lb-picker>

    <button @tap="handleTap('picker2')">自定义样式颜色-多级联动</button>
    <view>{{ value2.join('-') }}</view>
    <lb-picker ref="picker2"
      v-model="value2"
      mode="multiSelector"
      :list="list2"
      :level="3"
      @change="handleChange"
      @confirm="handleConfirm"
      @cancel="handleCancel">
    </lb-picker> -->
		<!-- <button @click="change">改变</button> -->

		<!-- 		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="message">
    <uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
</uni-popup> -->

		<view>
			<sunui-upbasic :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunui-upbasic>
			<button type="primary" @tap="getUpImgInfoBasic">获取上传Basic图片信息</button>
			<button type="primary" @tap="uImageTap">手动上传图片</button>
		</view>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import LbPicker from '@/components/lb-picker'
	import sunuiUpbasic from '@/components/sunui-upimg/sunui-upimg.vue'
	import config from '@/config/index.js'
	import {getTokenSync} from '@/utils/auth.js'
	export default {

		components: {
			LbPicker,
			uniPopup,
			sunuiUpbasic
		},
		data() {
			return {
				basicArr: [],
				// 基础版配置
				upImgBasic: {
				
					// 是否开启提示(提醒上传图片的数量)
					// tips: false,
					// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
					notli: false,
					// 图片数量
					count: 4,
					// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
					sourceType: 'camera',
					// 是否压缩上传照片(仅小程序生效)
					sizeType: true,
					// 上传图片背景修改 
					upBgColor: '#E8A400',
					// 上传icon图标颜色修改(仅限于iconfont)
					upIconColor: '#fff',
					// 上传svg图标名称
					// upSvgIconName: 'icon-card',
					// 上传文字描述(仅限四个字)
					// upTextDesc: '上传证书',
					// 删除按钮位置(left,right,bleft,bright),默认右上角
					delBtnLocation: '',
					// 是否隐藏添加图片
					// isAddImage: false,
					// 是否隐藏删除图标
					// isDelIcon: false,
					// 删除图标定义背景颜色
					// delIconColor: '',
					// 删除图标字体颜色
					// delIconText: '',
					// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
					iconReplace: ''
				},
			}
		},
		created() {
			let list = []
			for (let i = 1; i < 20; i++) {
				list.push({
					label: `选项${i}`,
					value: i
				})
			}
			this.list1 = list
		},
		methods: {
			// handleTap(picker) {
			// 	this.$refs[picker].show()
			// },
			// handleChange(item) {
			// 	console.log('change::', item)
			// },
			// handleConfirm(item) {
			// 	this.label = item.item.label
			// 	console.log(item.item.map(item => item.label).join(' '))
			// },
			// handleCancel(item) {
			// 	console.log('cancel::', item)
			// },
			// change() {
			// 	let user = {
			// 		username: 'asd',
			// 		password: '123'
			// 	}
			// 	// this.$store.dispatch('user/login',{username:user.username,password:user.password})
			// 	login(user).then((a) => {
			// 		console.log(a)
			// 	})
			// },
			// /**
			//  * 点击取消按钮触发
			//  * @param {Object} done
			//  */
			// close(done) {
			// 	// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			// 	// ...
			// 	done()
			// },
			// /**
			//  * 点击确认按钮触发
			//  * @param {Object} done
			//  * @param {Object} value
			//  */
			// confirm(done, value) {
			// 	// 输入框的值
			// 	console.log(value)
			// 	// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
			// 	// ...
			// 	done()
			// },
			// open() {
			// 	this.$refs.popup.open()
			// },
			// 手动上传图片(适用于表单等上传) -2019/05/10增加
			uImageTap() {
				this.$refs.uImage.uploadimage(this.upImgBasic);
			},
			// 删除图片 -2019/05/12(本地图片进行删除)
			async delImgInfo(e) {
				console.log('你删除的图片地址为:', e, this.basicArr.splice(e.index, 1));
			},
			// 基础版
			async upBasicData(e) {
				console.log('===>',e);
				// 上传图片数组
				let arrImg = [];
				for (let i = 0, len = e.length; i < len; i++) {
					try {
						if (e[i].path_server != "") {
							await arrImg.push(e[i].path_server.split(','));
						}
					} catch (err) {
						console.log('上传失败...');
					}
				}
				// 图片信息保存到data数组
				this.basicArr = arrImg;
				// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
				if (arrImg.length == this.upImgBasic.count) {
					uni.showToast({
						title: `上传成功`,
						icon: 'none'
					});
				}
			},
			// 获取上传图片basic
			getUpImgInfoBasic() {
				console.log('后端转成一维数组:', this.basicArr.join().split(','));
			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .lb-picker {
		.lb-picker-column-label {
			color: #f0ad4e;
		}

		.lb-picker-column-active {
			.lb-picker-column-label {
				color: #007aff;
				font-weight: 700;
			}
		}
	}
</style>
